<template>
    <div class="siteRight">

    <slot></slot>

    </div>
</template>

<script>
export default {
    name:'siteRight',
}
</script>

<style scoped>
.siteRight{
    height: 80px;
}
.nav-right{
    display: flex;
    width: 60%;
    height: 100%;
    margin-left: 40%;
}
.nav-right .item{
    flex: 1;
    height: 100%;
    position: relative;
}
.nav-right .item a{
    width: 100%;
    margin-top: 10px;
    display: inline-block;
    text-align: center;
}
.nav-right .item a p{
    color: #818181;
}
.nav-right .item:hover{
    background: rgb(216, 228, 228);
    border-radius: 5px;
}

.ulShow{
    opacity:0;
    transition:opacity 1s;
	-webkit-transition:opacity 1s; /* Safari */
}
.nav-right .item:hover .ulShow{
    opacity: 1;
}

.nav-right .item ul{
    position: absolute;
    background: rgba(182, 178, 178,0.3);
    border: #A4A4A4 1px solid;
    width: 80%;
    left: 10%;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
}
.nav-right .item ul li{
   line-height: 25px;
   border-bottom:1px #A4A4A4 dashed;
}
.nav-right .item ul li p{
    display: inline-block;
    font-size: 12px;
}
.nav-right .item ul li p:nth-child(1){
    width: 80%;
}.nav-right .item ul li p a{
    text-align: left;
    color: #A3A3A3;
}
.nav-right .item ul li p:nth-child(2){
    height: 20px;
    width: 20px;
    background: rgb(168, 24, 24);
    text-align: center;
    border-radius: 50%;
    line-height: 20px;
    color: #ffffff;
}
</style>